export default function App() {
  return (
    <>
      {/* 头部频道 */}
      <ul className="category">
        <li className="select">推荐</li>
        <li>html</li>
        <li>开发者资讯</li>
        <li>c++</li>
        <li>css</li>
        <li>数据库</li>
        <li>区块链</li>
        <li>go</li>
        <li>产品</li>
        <li>后端</li>
      </ul>
      {/* 文章列表 */}
      <div className="list">
        <div className="article_item">
          <h3 className="van-ellipsis">JVM堆 栈 方法区详解</h3>
          <div className="img_box">
            <img src="http://toutiao.itheima.net/resources/images/54.jpg" className="w100" alt="" />
          </div>
          <div className="info_box">
            <span>爱妃</span>
            <span>152评论</span>
            <span>2019-03-11 09:00:00</span>
          </div>
        </div>
        <div className="article_item">
          <h3 className="van-ellipsis">Maven 私服搭建</h3>
          <div className="img_box">
            <img src="http://toutiao.itheima.net/resources/images/12.jpg" className="w100" alt="" />
          </div>
          <div className="info_box">
            <span>爱妃</span>
            <span>156评论</span>
            <span>2019-03-11 09:00:00</span>
          </div>
        </div>
        <div className="article_item">
          <h3 className="van-ellipsis">React 深入系列４：组件的生命周期</h3>
          <div className="img_box">
            <img src="http://toutiao.itheima.net/resources/images/30.jpg" className="w100" alt="" />
          </div>
          <div className="info_box">
            <span>爱妃</span>
            <span>43评论</span>
            <span>2019-03-11 09:00:00</span>
          </div>
        </div>
      </div>
    </>
  );
}
